<template>
  <div v-if="dialogValue" class="add-page">
    <BackPage title="国有资产不动产详情" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <TitleBox title="基本信息" style="margin: 20px 0" />
      <div class="add-form-box f-g">
        <el-form ref="formRef" :model="ruleForm" :rules="rules" label-position="top" class="user-add-form " inline>
          <el-form-item label="单位" prop="unitName" style="margin-right: 64px">
            <el-input v-model="ruleForm.unitName" clearable />
          </el-form-item>
          <el-form-item label="登记单位名称" prop="regUnit">
            <el-input v-model="ruleForm.regUnit" clearable />
          </el-form-item>
          <el-form-item label="房屋坐落地址" prop="hoseLocaltion" style="margin-right: 64px">
            <el-input v-model="ruleForm.hoseLocaltion" clearable />
          </el-form-item>
          <el-form-item label="目前使用单位" prop="useUnit">
            <el-input v-model="ruleForm.useUnit" clearable />
          </el-form-item>
          <el-form-item label="建筑面积（㎡）" prop="buildArea" style="margin-right: 64px">
            <el-input v-model="ruleForm.buildArea" clearable type="number" />
          </el-form-item>
          <el-form-item label="土地面积（㎡）" prop="landArea">
            <el-input v-model="ruleForm.landArea" clearable type="number" />
          </el-form-item>
          <el-form-item label="补办类型" prop="handlingType" style="margin-right: 64px">
            <el-select v-model="ruleForm.handlingType" clearable>
              <el-option v-for="item in handlingTypeList" :key="item.id" :value="item.name" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="节点" prop="nodePoint">
            <el-select v-model="ruleForm.nodePoint" clearable>
              <el-option v-for="item in nodeList" :key="item.id" :value="item.actualValue" :label="item.actualValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="项目类别" prop="projectCategory" style="margin-right: 64px">
            <el-select v-model="ruleForm.projectCategory" clearable>
              <el-option v-for="item in categoryList" :key="item.id" :value="item.actualValue" :label="item.actualValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="片区" prop="area">
            <el-input v-model="ruleForm.area" clearable />
          </el-form-item>
          <el-form-item label="性质" prop="nature" style="margin-right: 64px">
            <el-input v-model="ruleForm.nature" clearable />
          </el-form-item>
          <el-form-item label="有无房产证" prop="isCert">
            <el-select v-model="ruleForm.isCert" clearable>
              <el-option v-for="item in booleanList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="产权人" prop="propertyOwner" style="margin-right: 64px">
            <el-input v-model="ruleForm.propertyOwner" clearable />
          </el-form-item>
          <el-form-item label="房产证号" prop="houseCert">
            <el-input v-model="ruleForm.houseCert" clearable />
          </el-form-item>
          <el-form-item label="具体情况" prop="situation" style="width: 100%">
            <el-input v-model="ruleForm.situation" clearable type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item label="存在问题" prop="problem" style="width: 100%">
            <el-input v-model="ruleForm.problem" clearable type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item label="建议" prop="advise" style="width: 100%">
            <el-input v-model="ruleForm.advise" clearable type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item label="备注" prop="remark" style="width: 100%">
            <el-input v-model="ruleForm.remark" clearable type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSave">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <TitleBox title="补办进度" style="margin: 20px 0" />
      <div class="f-r j-e">
        <el-form>
          <el-form-item>
            <el-button type="primary" @click="onAdd">添加补办进度</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-box">
        <el-table
          v-loading="loading"
          height="400px"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="index" width="80px" label="序号" align="center" />
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
          <el-table-column label="附件资料">
            <template slot-scope="scope">
              <ClickDownload v-for="(item,index) in scope.row.file" :key="index" :file="item" style="margin-right: 5px;margin-bottom: 5px" />
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="120px">
            <template slot-scope="scope">
              <el-button type="text" @click="onEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </div>
    <ItemAdd ref="ItemAddRef" @get-page="initData" />

  </div>
</template>

<script>
import crud from '@/mixins/crud'
import ItemAdd from './add'
import { http_assets } from '@/api'
export default {
  name: 'User',
  components: {
    ItemAdd
  },
  mixins: [crud],
  props: {
    nodeList: {
      type: Array
    },
    categoryList: {
      type: Array
    }
  },
  data() {
    return {
      detailRowList: [
        { label: '片区', key: 'area' },
        { label: '性质', key: 'nature' },
        { label: '有无房产证', key: 'isCert', func: (value) => value ? '是' : '否' },
        { label: '产权人', key: 'propertyOwner' },
        { label: '房产证号', key: 'houseCert' }
      ],
      detailRowList2: [
        { label: '具体情况', key: 'situation' },
        { label: '存在问题', key: 'problem' },
        { label: '建议', key: 'advise' },
        { label: '备注', key: 'remark' }
      ],
      request: {
        delete: http_assets.item_delete
      },
      dialogValue: false,
      currentDetail: {},
      columns: [
        { prop: 'time', label: '时间' },
        { prop: 'hundingContent', label: '内容' }
      ],
      assetId: '',
      ruleForm: {
        id: undefined,
        unitName: '',
        regUnit: '',
        hoseLocaltion: '',
        useUnit: '',
        buildArea: '',
        landArea: '',
        handlingType: '',
        nodePoint: '',
        projectCategory: '',
        area: '',
        nature: '',
        isCert: 1,
        propertyOwner: '',
        houseCert: '',
        situation: '',
        problem: '',
        advise: '',
        remark: ''
      },
      rules: {},
      handlingTypeList: [
        { id: '两证齐全', name: '两证齐全' },
        { id: '单一土地证', name: '单一土地证' },
        { id: '单一房产证', name: '单一房产证' },
        { id: '两证全无', name: '两证全无' }
      ],
      booleanList: [
        { id: 1, name: '是' },
        { id: 0, name: '否' }
      ]
    }
  },
  methods: {
    formatTableData(tableData) {
      tableData.forEach(el => {
        if (el.file) {
          el.file = JSON.parse(el.file)
        } else {
          el.file = []
        }
      })
    },
    initData() {
      // 补办进度
      http_assets.itemPage(this.assetId).then(res => {
        this.tableData = res.data.records
        this.formatTableData(this.tableData)
        this.totalSize = res.data.total
      })
    },
    open(item) {
      this.assetId = item.id
      http_assets.read(item.id).then(res => {
        for (const key in this.ruleForm) {
          this.ruleForm[key] = res.data[key]
        }
      })
      this.initData()
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    },
    onAdd() {
      this.$refs.ItemAddRef.open(this.assetId)
    },
    onEdit(item) {
      this.$refs.ItemAddRef.open(this.assetId, item)
    },
    onSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          const formData = {
            ...this.ruleForm
          }
          http_assets[this.ruleForm.id ? 'update' : 'create']({
            ...formData
          }).then(res => {
            this.$message.success(res.msg)
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.add-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 30px;
}
.add-form-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 30px;
  ::v-deep .el-form {
    .el-form-item {
      width: calc((100% - 64px) / 2);
      margin-right: 0;
    }
    .el-select {
      width: 100%;
    }
  }
}

</style>
